<template>
  <div class="feed_back_page">
    <div class="w830">
      <div class="page_head">意见反馈</div>
<!--      <div v-if="!$store.state.user.isLogin" class="mention">-->
<!--        请登录后反馈意见-->
<!--        <el-button-->
<!--          style="font-size: 18px;margin-left: 10px;"-->
<!--          type="primary"-->
<!--          plain-->
<!--          size="medium"-->
<!--          @click="toLogin"-->
<!--        >首页登录</el-button-->
<!--        >-->
<!--      </div>-->
      <div class="page_body">
        <el-form
          label-position="top"
          label-width="80px"
          :model="formData"
        >
          <el-form-item label="反馈标题">
            <el-input v-model="formData.title" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="反馈正文">
            <el-input
              type="textarea"
              :rows="30"
              placeholder="请输入正文"
              v-model="formData.content">
            </el-input>
          </el-form-item>
<!--          <el-form-item label="链接地址">-->
<!--            <el-input placeholder="请输入链接地址" v-model="formData.link">-->
<!--              <template slot="prepend">Http://</template>-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="上传图片">-->
<!--            <el-upload-->
<!--              action="#"-->
<!--              multiple-->
<!--              :limit="9"-->
<!--              :file-list="imgsList"-->
<!--            >-->
<!--              <el-button size="small" type="primary">点击上传图片<i class="el-icon-camera-solid el-icon&#45;&#45;right"></i></el-button>-->
<!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--            </el-upload>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="上传文件">-->
<!--            <el-upload-->
<!--              action="#"-->
<!--              multiple-->
<!--              :limit="9"-->
<!--              :file-list="imgsList"-->
<!--            >-->
<!--              <el-button size="small" type="primary">点击上传文件<i class="el-icon-circle-plus-outline el-icon&#45;&#45;right"></i></el-button>-->
<!--            </el-upload>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="联系方式">-->
<!--            <el-tooltip class="item" effect="dark" content="您可以留下E-mail、QQ或者电话号码，方便我们与您进一步沟通（可以不填）" placement="right">-->
<!--              <el-input-->
<!--                style="width: 400px;"-->
<!--                placeholder="请输入联系方式"-->
<!--                prefix-icon="el-icon-phone"-->
<!--                v-model="formData.contact">-->
<!--              </el-input>-->
<!--            </el-tooltip>-->
<!--          </el-form-item>-->
<!--          <div>-->
<!--            <span>{{}}</span>-->
<!--          </div>-->
          <el-form-item>
            <el-button type="primary" @click="submitContent">提交</el-button>
          </el-form-item>
        </el-form>
        <el-dialog
          title=""
          width="30%"
          :show-close="false"
          :close-on-click-modal="false"
          :visible.sync="subSuccessPop"
        >
          <el-result icon="success" title="提交成功">
            <template slot="extra">
              <el-button type="primary" size="medium" @click="subSuccessPop = false"
              >确定</el-button
              >
            </template>
          </el-result>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "feedback",
  middleware: ['authenticated'],
  data() {
    return {
      isLogin: false, //是否登录
      formData: {
        title: '',
        content: '',
        link: '',
        contact: '',
      },
      userId:0,
      imgsList: [],
      qmUserInfo: {},
      subSuccessPop: false,
      authorization: "",
    }
  },
  mounted(){
    this.getUserInfo();
  },
  methods: {
    // async asyncData({ app, store, route }) {
    //   if (app.$cookies.get("token")) {
    //     //写入token
    //     store.commit("user/SET_LOGIN", true);
    //     console.log(this.$store.state.user.isLogin)
    //   }
    // },
    //跳转到医生认证
    toLogin() {
      this.$router.push("/home");
    },
    async getUserInfo() {
      const res = await this.$api.reqUserInfo();
      this.qmUserInfo = res.user
      // console.log(this.qmUserInfo.userId)
    },
    async submit(param) {
      const res = await this.$api.reqFeedbacks(param);
      if (res.code === 200) {
        this.dialogVisible = false;
        this.subSuccessPop = true;
      }
    },

    submitContent() {
      const param = {
        content:this.formData.content,
        title:this.formData.title,
        userId:this.qmUserInfo.userId,
      };
      this.submit(param);
    }
  }
};
</script>

<style scoped lang="scss">
.mention {
  text-align: center;
  font-size: 18px;
  padding-top: 10px;
  margin-bottom: 20px;
  font-weight: 700;
}
.feed_back_page {
  width: 100%;
  background-color: #f6f7f9;
  text-align: left !important;
  min-height: 100vh;
  .w830 {
    width: 830px;
    padding: 20px;
    padding-top: 0;
    box-sizing: border-box;
    background-color: #fff;
    margin: 0 auto;
    .page_head {
      padding: 20px 0;
      box-sizing: border-box;
      text-align: left;
      border-bottom: 1px solid #ccc;
    }
    .page_body{
      background-color: #fff;
      text-align: left;
      margin-top: 30px;
    }
  }
}
</style>
